<template>
    <div>
        <div class="searchTop">
            <span class="iconfont icon-direction-left left" @click="back()"></span>
            <input type="text" v-model="searchvalue" @keyup.enter="enterkey()">
            <span class="iconfont icon-shanchu right" v-show="searchvalue !=''" @click="clear()"></span>
            <!-- <span class="iconfont icon-fenxiang right"></span> -->
        </div>
        <div class="searchcontent">
        <div class="hotsearch">           
            <div class="hotlist">
                <div class="hottext">热门搜索</div>
                <ul>
                    <li v-for="(item,index) in hotlist" :key="index" @click="searchvalue=item.searchWord">{{item.searchWord}}</li>
                </ul>
            </div>            
        </div>
        <div class="searchlist" v-show="searchvalue !=''">
                <div class="searchtext">搜索结果</div>
                <ul>
                    <li v-for="(item,index) in searchlist" :key="index" @click="setId(item.id)">
                        <span class="iconfont icon-search"></span>
                        {{item.name}}
                    </li>
                </ul>
            </div>
            </div>
            <div class="match" v-if="showmatch==true">
                <div class="singer">
                    <h3>歌手</h3>
                    <div class="infobox" v-for="(item,index) in singer" :key="index">
                        <router-link :to="{path:'/singerlist',query:{id:item.id,picUrl:item.picUrl}}">
                        <div class="img">
                            <img :src="item.img1v1Url" alt="">
                        </div>
                        <div class="rbox">
                            <div class="name">{{item.name}}</div>
                            <div class="fans"></div>
                        </div>
                        </router-link>
                    </div>
                </div>
                <div class="songlist">
                    <h3>歌单</h3>                    
                        <router-link tag="div" class="songbox" v-for="(item,index) in matchsonglist" :key="index" :to="{path:'/recommendlist',query:{id:item.id}}">
                        <div class="img" :style="{'background-image':'url('+item.coverImgUrl+')'}">
                            <!-- <img :src="item.coverImgUrl" alt=""> -->
                        </div>
                        <div class="info">
                            <div class="singername">{{item.name}}</div>
                            <div class="songcount">{{item.trackCount}}首</div>
                        </div>
                        </router-link>                   
                </div>
                <div class="solosonglist">
                    <h3>单曲</h3>
                    <div class="songbox" v-for="(item,index) in searchlist" :key="index" @click="setId(item.id)">
                        <div class="songname">{{item.name}}</div>
                        <div>
                            <span class="singername" v-for="(i,k) in item.ar" :key="k">{{i.name}}</span>
                            <span> - </span>
                            <span class="cdname">{{item.al.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
import {getSearchHotDetail,getSearch} from '../api/search.js';
export default {
    data() {
        return {
            searchvalue:"",
            showmatch:false,
            hotlist:[],
            singer:[],
            searchlist:{
                al:{name:''}
            },
            matchsonglist:{
                name:''
            }
        }
    },
    methods: {
        back(){
                this.$router.go(-1);
            },
        clear(){
                this.searchvalue = "";
                this.searchlist =  {result:{
                    songs:[]
                }};
        },
        change(){
            if(this.searchvalue==""){
                this.showmatch = false;
            }
        },
        setId(id){
                this.$emit("get-player-id",id);
            },
            enterkey(){
                this.getSearchMultimatchFun();
                console.log(this.searchlist);
                this.showmatch = true;
            },
        getSearchHotDetailFun(){
            getSearchHotDetail().then(data=>{
                // console.log(data);
                this.hotlist = data.data;
            })
        },
        getSearchFun(){
            getSearch({
                keywords:this.searchvalue,
                limit:5
            }).then(data=>{
                // console.log(data);
                if(this.searchvalue!=""){
                    this.searchlist = data.result.songs;
                }
                
                // console.log(this.searchlist);
            })
        },
        getSearchMultimatchFun(){
            getSearch({
                keywords:this.searchvalue,
                type:1000,
                limit:5
            }).then(data=>{
                console.log(data);
                this.matchsonglist = data.result.playlists;
            });
            getSearch({
                keywords:this.searchvalue,
                type:100,
                limit:5
            }).then(data=>{
                console.log(data);
                this.singer = data.result.artists;
            });
        }   
    },
    mounted() {
        this.$nextTick(()=>{
            this.getSearchHotDetailFun();           
        })
    },
    updated() {
        this.getSearchFun();
        this.change();        
    },
}
</script>
<style lang="less">
.match{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(244,244,244);
    top: 0px;
    padding-top: 44px;
    overflow-y: scroll;
    .songlist{
    width: 92%;
    margin: 10px auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
    padding-top: 16px;
    h3{
        text-indent: 10px;
        margin-bottom: 10px;
    }
    .songbox{
        display: flex;
        margin-bottom: 10px;
        margin-left: 10px;
        padding-bottom: 10px;
        .img{
            flex: 0 0 50px;
            height: 50px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            // img{
            //     width: 100%;
            //     border-radius: 10px;
            // }
            margin-right: 10px;
        }
        .info{
            .singername{
                color: rgb(102,143,186);
                font-size: 12px;
            }
            .songcount{
                color: rgb(170,170,170);
                font-size: 10px;
            }
        }
    }
    }
    .solosonglist{
    width: 92%;
    margin: 10px auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
    padding-top: 16px;
    h3{
        text-indent: 10px;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgb(255,254,254);
    }
    .songbox{
        height: 74px;
        width: 100%;
        text-indent: 10px;
        border-bottom: 1px solid rgb(255,254,254);
        .songname{
            font-size: 14px;
            font-weight: bold;
            color: rgb(107,107,107);
            margin-bottom: 4px;
        }
        .singername{
            font-size: 10px;
            color: rgb(102,143,186);
        }
        .cdname{
            color: rgb(157,157,157);
            font-size: 10px;
        }
    }
    }
    .singer{
    width: 92%;
    margin: 10px auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
    padding-top: 16px;
    padding-bottom: 10px;
    h3{
        text-indent: 10px;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgb(255,254,254);
    }
    .infobox{
        display: flex;
        margin-left: 10px;
        margin-bottom: 10px;
        .img{
            flex: 0 0 50px;
            height: 50px;
            img{
                // width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            margin-right: 10px;
        }
        .rbox{
            flex: 1;
            .name{
            font-size: 14px;
            color: rgb(102,143,186);
            margin-bottom: 5px;
            }
            .fans{
                font-size: 12px;
                color: rgb(195,195,195);
            }
        }
    }
    }
}
.searchTop{
    background-color: #fff;
    width: 100%;
    height: 40px;
    display: flex;
    position: fixed;
    line-height: 40px;
    padding: 0 6px;
    z-index: 800;
    // border: 1px solid transparent;
    .left{
        color: black;
        font-size: 20px;
        flex: 0 0 40px;
    }
    .right{
        color: rgb(179, 174, 174);
        font-size: 20px;
        position: absolute;
        top: 0;
        right: 20px;
    }
    i{
        font-weight: bold;
        font-size: 18px;
        font-style:normal;
        flex: 1;
    }   
    input{
        border:none; 
        border-bottom:1px solid #000;
        outline: none;
        flex: 1;
        margin-right: 10px;
    }
}
.hotsearch{
    .hottext{
        font-size: 12px;
        color: rgb(179, 174, 174);
        text-indent: 5px;
    }
    .hotlist{
        padding-top: 50px;
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                padding: 5px 10px;
                border: 1px solid rgb(179, 174, 174);
                border-radius: 50px;
                margin-left: 15px;
                margin-top: 10px;
                font-size: 10px;
            }
        }
    }
}
.searchlist{
    margin-top: 10px;
    .searchtext{
        font-size: 12px;
        color: rgb(179, 174, 174);
        text-indent: 5px;
    }
    ul{
        display: flex;
        flex-direction: column;
        // flex-wrap: wrap;
        li{
            font-size: 12px;
            color: #000;
            text-indent: 20px;
            margin-top: 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid rgb(249,249,249);
            span{
                font-size: 10px;
            }
        }
    }
}
</style>